<template>
	<view class="page friend-add">
		<nav-header :show-right="false" title="添加"></nav-header>
		<view class="search-bar">
			<uni-search-bar v-model="searchText" radius="100" :focus="true" @confirm="onSearch()" @cancel="onCancel()"
				clearButton="auto" cancelButton="none" placeholder="搜索好友/官方群/友商群"></uni-search-bar>
		</view>
		<view class="search-items">
			<view class="search-sao" @click="scanCode">
				<view class="sao-left">
					<!-- <uni-icons type="scan" size="28"></uni-icons> -->
					<svg-icon icon="color-3" :width="48"></svg-icon>
					<text>扫一扫加好友/群聊</text>
				</view>
				<view>
					<!-- <uni-icons type="right" size="24"></uni-icons> -->
					<svg-icon icon="arrowRight" :width="32"></svg-icon>
				</view>
			</view>

			<view class="search-qun" @click="goGroupAdd">
				<view class="qun-left">
					<!-- <uni-icons type="chatboxes" size="30"></uni-icons> -->
					<svg-icon icon="color-1" :width="48"></svg-icon>
					<text>发起群聊</text>
				</view>
				<view>
					<!-- <uni-icons type="right" size="24"></uni-icons> -->
					<svg-icon icon="arrowRight" :width="32"></svg-icon>
				</view>
			</view>

			<!-- <view class="search-friend">
				<view class="friend-left">
					<svg-icon icon="color-6" :width="48"></svg-icon>
					<text>好友推荐</text>
				</view>
				<view>
					<svg-icon icon="arrowRight" :width="32"></svg-icon>
				</view>
			</view> -->
		</view>
		<up-divider text="更多推荐" textSize="12"></up-divider>
		<up-loading-icon timing-function="linear" mode="semicircle" text="加载中" :show="loading"></up-loading-icon>
		<view class="search-rec" v-if="qun.length > 0">
			<view class="rec-title text-xs-Regular"><text>推荐官方群</text></view>
			<view v-for="(user) in qun" :key="user.id" @tap="onGoJoin(user.id)">
				<view class="user-item">
					<!-- <image :src="user.headImage" alt="" class="avr-img" /> -->
					<head-image :url="user.headImage" :name="user.name" :size="100" :isGroup="true"></head-image>
					<view class="user-name">
						<view class="fc">
							<badge type="business-group" :title="user.badge"></badge>
							<text style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">
								{{ user.name }}
							</text>
						</view>
						<view class="user-person">
							<!-- <uni-icons type="person" size="22"></uni-icons> -->
							<svg-icon icon="人数" :width="34"></svg-icon>
							<text style="color: #535862;margin-left: 8rpx;">{{ user.memberSize }}人</text>
						</view>
					</view>
					<view class="user-btns">
						<button class="btncolor" type="primary" v-if="!haveGroup(user.id)" size="mini"
							@tap.stop.native="onGoJoin(user.id)">
							<text class="text-xs-Medium">申请群聊</text>
						</button>
						<button type="default" v-else
							style="color: #aaa;border-radius: 34rpx;border-left: 1rpx solid #e7e7e7;border-right: 1rpx solid #e7e7e7;"
							size="mini" disabled>已添加</button>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="user-items">
			<scroll-view class="scroll-bar" scroll-with-animation="true" scroll-y="true">
				<view v-for="(user) in users" :key="user.id" v-show="user.id != userStore.userInfo.id">
					<view class="user-item">
						<head-image :id="user.id" :name="user.nickName" 
							:online="user.online" :url="user.headImage"
							:size="100"></head-image>
						<view class="user-name">{{ user.nickName}}</view>
						<view class="user-btns">
							<button type="primary" v-show="!isFriend(user.id)" size="mini"
								@click.stop="onAddFriend(user)">加为好友</button>
							<button type="default" v-show="isFriend(user.id)" size="mini" disabled>已添加</button>
						</view>
					</view>
				</view>
			</scroll-view>
		</view> -->
	</view>
</template>

<script>
	import {
		execShareData
	} from '@/utils/qrcode';
	export default {
		data() {
			return {
				searchText: "",
				users: [],
				qun: [],
				loading: false,
				badge: "",
				sourceType: null //来自哪个tabbar
			}
		},
		methods: {
			addGroup(id) {
				let data = {
					groupId: id,
					ids: [this.userStore.userInfo.id]
				}
				this.$http({
					url: "/group/addGroupMemberByGroupId",
					method: "POST",
					data: data
				}).then(() => {
					uni.showToast({
						title: "加入官方群成功",
						icon: "none"
					})
				})
			},
			onGoJoin(id) {
				uni.navigateTo({
					url: `/pageSubOne/group/group-join?id=${id}`
				})
			},
			onCancel() {
				uni.navigateBack();
			},
			goGroupAdd() {
				uni.navigateTo({
					url: "/pageSubOne/group/group-add?groupType=" + this.sourceType
				})
			},
			getData() {
				this.loading = true
				//const code = this.userStore.userInfo.hometownCode
				const code = 10086

				if (code) {
					this.$http({
						url: `/group/findTopFourOfficialGroup/${code}`,
						method: "GET"
					}).then((data) => {
						this.loading = false
						console.log(data)
						data.forEach(item => {
							let firstFour = item.showGroupName.slice(0, 4);
							const lastTwo = firstFour.slice(-2); // 获取前4个字符的最后2个字符
							if (firstFour.length === 4 && ["官", "民", "社", "在"].includes(firstFour.slice(-
									1))) {
								// 如果最后一个字是“官”，则删除它
								firstFour = firstFour.slice(0, 3);
							}
							if (lastTwo === "村村") {
								firstFour = firstFour.slice(0, 3);
							}
							item.badge = firstFour;

						})
						this.qun = data
					})
				} else {
					this.loading = false
				}
			},
			scanCode() {
				// 允许从相机和相册扫码
				// #ifdef MP-WEIXIN
				uni.scanCode({
					// scanType: ['QR_CODE'], //条形码
					success: function(res) {
						execShareData(res)
						// console.log('条码类型：' + res.scanType);
						// console.log('条码内容：' + res.result);
						// 微信小程序
						/* if (res.errMsg == "scanCode:ok") {
							// 扫描到的信息
							console.log(res.result);
						} else {
							console.log("未识别到二维码，请重新尝试！")
						} */
					}
				});
				// #endif
				// #ifndef MP-WEIXIN
				uni.chooseImage({
					count: 1,
					success: async (chooseImageRes) => {
						console.log(chooseImageRes);
						uni.showToast({
							icon: 'none',
							title: "请通过微信扫一扫识别二维码"
						})
					}
				});
				// #endif
			},
			onSearch() {
				// this.$http({
				// 	url: "/user/findByName?name=" + this.searchText,
				// 	method: "GET"
				// }).then((data) => {
				// 	this.users = data;
				// })
				if (this.searchText == "") {
					uni.showToast({
						title: "搜索内容不能为空",
						icon: "none"
					})
					return
				}
				uni.navigateTo({
					url: '/pageSubOne/friend/search-finial?context=' + this.searchText
				})
			},
			onAddFriend(user) {
				this.$http({
					url: "/friend/add?friendId=" + user.id,
					method: "POST"
				}).then((data) => {
					let friend = {
						id: user.id,
						nickName: user.nickName,
						headImage: user.headImage,
						online: user.online
					}
					this.friendStore.addFriend(friend);
					uni.showToast({
						title: "添加成功，对方已成为您的好友",
						icon: "none"
					})
				})
			},
			onShowUserInfo(user) {
				uni.navigateTo({
					url: "/pageSubOne/common/user-info?id=" + user.id
				})
			},
			isFriend(userId) {
				let friends = this.friendStore.friends;
				let friend = friends.find((f) => f.id == userId);
				return !!friend;
			},
			haveGroup(id) {
				let groups = this.groupStore.groups
				let group = groups.find((g) => g.id == id)
				return !!group
			}
		},
		onLoad(options) {
			this.getData()
			this.sourceType = options.sourceType
		}
	}
</script>

<style scoped lang="scss">
	.friend-add {
		position: relative;
		// border: #dddddd solid 1px;
		display: flex;
		flex-direction: column;

		:deep(.uni-searchbar__box) {
			border: 1rpx solid $gray-200;
		}

		.search-items {
			.search-sao {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 24rpx 32rpx;
				height: 48rpx;

				.sao-left {
					display: flex;
					justify-content: center;
					align-items: center;
					gap: 16rpx;
					vertical-align: middle;
				}
			}

			.search-qun {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 24rpx 32rpx;
				height: 48rpx;

				.qun-left {
					display: flex;
					justify-content: center;
					align-items: center;
					gap: 16rpx;
				}
			}

			.search-friend {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 24rpx 32rpx;
				height: 48rpx;

				.friend-left {
					display: flex;
					justify-content: center;
					align-items: center;
					gap: 16rpx;
				}
			}

			text {
				font-size: 30rpx;
				margin-left: 10rpx;
			}
		}

		.search-rec {
			width: 100%;

			.rec-title {
				display: flex;
				// justify-content: center;
				align-items: center;
				padding: 8px 16px;
				color: $gray-900
			}

			.avr-img {
				width: 100rpx;
				height: 100rpx;
				border-radius: 16%;
			}

			.user-item {
				height: 120rpx;
				display: flex;
				margin-bottom: 1rpx;
				position: relative;
				padding: 0 32rpx;
				align-items: center;
				background-color: white;
				white-space: nowrap;
				margin-top: 20rpx;

				.btncolor {
					background-color: $brand-500;
					color: $white;
					padding: 8rpx 24rpx;
					border-radius: 34rpx;
					text-align: center;
					line-height: 36rpx;
				}

				.user-name {
					flex: 1;
					padding-left: 20rpx;
					font-size: 30rpx;
					line-height: 60rpx;
					white-space: nowrap;
					overflow: hidden;

					.fc {
						display: flex;
						align-items: center;
						gap: 8rpx;
					}
				}

				.user-person {
					display: flex;
					align-items: center;
					font-size: 26rpx;

					text {
						margin-left: 5rpx;
					}
				}
			}
		}

		.search-bar {
			background: white;
		}

		.user-items {
			position: relative;
			flex: 1;
			overflow: hidden;

			.user-item {
				height: 120rpx;
				display: flex;
				margin-bottom: 1rpx;
				position: relative;
				padding: 0 30rpx;
				align-items: center;
				background-color: white;
				white-space: nowrap;

				.user-name {
					flex: 1;
					padding-left: 20rpx;
					font-size: 30rpx;
					font-weight: 600;
					line-height: 60rpx;
					white-space: nowrap;
					overflow: hidden;
				}
			}

			.scroll-bar {
				height: 100%;
			}
		}

	}
</style>